<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:composite="http://java.sun.com/jsf/composite"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:a4j="http://richfaces.org/a4j">

<composite:interface>
  <composite:attribute name="id" type="java.lang.String"
    shortDescription="id of component (java naming)" required="true"/>

  <composite:attribute name="placeholder" type="java.lang.String"
    shortDescription="placeholder text for input field" default=""/>

  <composite:attribute name="actionBean"
    type="org.zanata.ui.AbstractListFilter"
    shortDescription="action bean (org.zanata.action.AbstractListFilter)"
    required="true"/>

  <composite:attribute name="render" required="true"
    shortDescription="Ids of component to render after filter"/>

  <composite:attribute name="listId" required="true" type="java.lang.String"
    shortDescription="Id of the list to be clear before filter"/>

  <composite:attribute name="bottomPanel" default="false"
    type="java.lang.Boolean"
    shortDescription="is for bottom view"/>

  <composite:attribute name="iconClass" type="java.lang.String"
    shortDescription="css class for icon display" default=""/>

  <composite:attribute name="oncomplete"
    shortDescription="The client-side script method to be called after the DOM is updated"/>

  <composite:attribute name="status" type="java.lang.String"
    shortDescription="Name of the request status component that will indicate the status of the Ajax request when filtering"/>

</composite:interface>
<composite:implementation>

  <a4j:jsFunction name="#{cc.attrs.id}NextPage"
    action="#{cc.attrs.actionBean.nextPage}" status="#{cc.attrs.status}"
    render="#{cc.attrs.id}-page-info, #{cc.attrs.id}-pager, #{cc.attrs.render}"
    oncomplete="#{cc.attrs.oncomplete}"
    limitRender="true">
  </a4j:jsFunction>

  <a4j:jsFunction name="#{cc.attrs.id}PreviousPage"
    action="#{cc.attrs.actionBean.previousPage}" status="#{cc.attrs.status}"
    render="#{cc.attrs.id}-page-info, #{cc.attrs.id}-pager, #{cc.attrs.render}"
    oncomplete="#{cc.attrs.oncomplete}"
    limitRender="true">
  </a4j:jsFunction>

  <ui:fragment rendered="#{!cc.attrs.bottomPanel}">
    <a4j:jsFunction name="#{cc.attrs.id}FilterList"
      action="#{cc.attrs.actionBean.firstPage}" status="#{cc.attrs.status}"
      render="#{cc.attrs.id}-pager, #{cc.attrs.id}-page-info, #{cc.attrs.render}"
      limitRender="true"
      oncomplete="#{cc.attrs.oncomplete}"
      onbegin="clearHTML('#{rich:clientId(cc.attrs.listId)}')">
      <a4j:param name="val" assignTo="#{cc.attrs.actionBean.filter}"/>
      <a4j:attachQueue requestDelay="500"/>
    </a4j:jsFunction>

    <div class="form--search panel__search reveal__target--appear"
      id="#{cc.attrs.id}">
      <label for="#{cc.attrs.id}__input" class="form--search__label"></label>
      <input id="#{cc.attrs.id}__input" type="search" maxlength="255"
        placeholder="#{cc.attrs.placeholder}…"
        onkeyup="filterList(this, #{cc.attrs.id}FilterList)"
        class="form--search__input js-reveal__target__input"/>

      <div class="panel__search__cancel">
        <button
          class="button--link js-reveal__reset l--push-right-half is-hidden "
          data-target="##{cc.attrs.id}"
          onclick="#{cc.attrs.id}FilterList('')"
          title="#{msgs['jsf.ClearSearch']}">
          #{msgs['jsf.Clear']}
        </button>
        <button class="button--link js-reveal__cancel"
          onclick="if(jQuery(#{cc.attrs.id}__input).val().length != 0) {#{cc.attrs.id}FilterList('')} else {setTimeout(zanata.panel.init, 10)}"
          data-target="##{cc.attrs.id}">#{msgs['jsf.Cancel']}
        </button>
      </div>

    </div>
  </ui:fragment>

  <h:panelGroup layout="block"
    styleClass="panel__results #{cc.attrs.bottomPanel ? 'panel__results--bottom js-panel__results--bottom' : ''}">
    <h:panelGroup layout="block"  id="#{cc.attrs.id}-pager">
      <h:panelGroup layout="block"  styleClass="panel__results__type"
        rendered="#{not (cc.attrs.bottomPanel and cc.attrs.actionBean.totalRecords eq 0)}">
        <i class="i txt--neutral #{cc.attrs.iconClass}"></i>
      </h:panelGroup>
      <ui:fragment
        rendered="#{cc.attrs.actionBean.totalRecords ge cc.attrs.actionBean.pageSize}">
        <ul class="panel__pager">
          <li>
            <button title="#{msgs['jsf.pager.PreviousPage']}"
              class="panel__pager__button"
              disabled="#{cc.attrs.actionBean.allowsPreviousPage() ? '' : 'disabled'}"
              onclick="#{cc.attrs.id}PreviousPage()">
              <i class="i--huge i--arrow-left"></i>
            </button>
          </li>
          <li>
            <button title="#{msgs['jsf.pager.NextPage']}"
              class="panel__pager__button"
              disabled="#{cc.attrs.actionBean.allowsNextPage() ? '' : 'disabled'}"
              onclick="#{cc.attrs.id}NextPage()">
              <i class="i--huge i--arrow-right"></i>
            </button>
          </li>
        </ul>
      </ui:fragment>
    </h:panelGroup>
    <span class="txt--meta">
      <h:panelGroup id="#{cc.attrs.id}-page-info">
        <ui:fragment
          rendered="#{not (cc.attrs.bottomPanel and cc.attrs.actionBean.totalRecords eq 0)}">
          <ui:fragment
            rendered="#{cc.attrs.actionBean.totalRecords gt cc.attrs.actionBean.pageSize}">
            <strong>#{cc.attrs.actionBean.pageStartIdx+1}-#{cc.attrs.actionBean.pageEndIdx+1}</strong> of
            #{cc.attrs.actionBean.totalRecords}
          </ui:fragment>
          <ui:fragment
            rendered="#{cc.attrs.actionBean.totalRecords le cc.attrs.actionBean.pageSize}">
            <strong>#{cc.attrs.actionBean.totalRecords}</strong>
          </ui:fragment>
        </ui:fragment>
      </h:panelGroup>


      <ui:fragment rendered="#{!cc.attrs.bottomPanel}">
        <button class="button--link panel__search__button js-reveal__show"
          onclick="setTimeout(zanata.panel.init, 10)"
          data-target="##{cc.attrs.id}">
          #{msgs['jsf.Search']}<i class="i--right i--search"></i>
        </button>
      </ui:fragment>
    </span>
  </h:panelGroup>
</composite:implementation>
</html>
